Hi Dai Gei Ho~ 我是Winnie ~
在此篇文章中，我們要來說 如何在 Content Script 中 使用 Iframe 及 解決的問題。
iframe 為HTML語法中的內嵌框架，主要使用目的為可以在當前網頁內載入另一個網頁，最常見的應用像是我們常看到他人網站內嵌入Youtube影片 或是 在網站中嵌入FaceBook 粉絲專頁 等...
使用方法:
透過 在<iframe> 中的 src指定對應 連結就可以引入對應網頁。
<iframe src="http://www.example.com/" height="200" width="300"></iframe>
如何在 Extension 中使用呢？
與昨日介紹 Inject Script Module 方法一樣，可以 透過 Content Script 來注入
由於 Content Script 沒有html頁面可以定義<iframe>， 所以我們只好透過 document.createElement('iframe')方式來動態創建。
iframe 創建範例 如下:
先判斷當前頁面有無 El 元素，沒有的話一樣創建一個注入網站中。
// content.js
// 先判斷 網頁中有無 El 元素
const El = document.querySelector('#extension_iframe')
if (!El) {
const div = document.createElement('div');
div.id = "extension_iframe"
div.setAttribute('style','z-index:2147483647; position:fixed; bottom:30px; right:20px;font-size:16px;');
// 注入網站中
document.body.appendChild(div);
...略
}
一樣透過 document.createElement('iframe')創建一個 iframe tag，設定其相關屬性，接著在iframe 中的 src 指定想要引入的網址連結，即可完成注入 iframe。
// content.js
...略
const iframeEl = document.createElement('iframe');
iframeEl.sandbox = 'allow-scripts allow-popups'; //允許在iframe裡使用js
iframeEl.width = '335px'; //設定 寬度
iframeEl.height = '440px'; //設定 長度
iframe.frameborder="0" // 0為 不顯示邊框， 1為顯示編框
iframeEl.scrolling="no"
iframeEl.src = url;
El.prepend(iframe);
...略
咦 就這樣嗎?
嘿還沒結束，重頭戲來了，不知道大家還記不記得 在前面兩天我們介紹了如何在Content Script 中 使用 Es6 Module 嗎？ 除了限制多還有困難重重
關於 在Content Script 中 使用 Es6 Module 可以看這兩篇 -> Day 21 Extension 中的 ES6 Module、Day 22 Content Script 中使用 ES6 Module
但此時我們以透過 iframe 的寫法，我們可以解決這些限制。
一樣的要要使用 Es6 Module，需透過定義 <script> 中的 type="module" 指定 src 作為進入點。
// content.html
<html>
<head>
<title>content</title>
</head>
<body>
<div id="content_app"></div>
<script type="module" src="/src/content_script/main.js"></script>
</body>
</html>
接著透過在 Manifest.json 中定義 web_accessible_resources，將 content.html定義為 Extension 內的資源。
//Manifest.json
{
...略
"web_accessible_resources": ["content.html"]
}
最後，使用 chrome.runtime.getURL取得 存在於chrome extension 的content.html網址，並指定給iframe 的 src 連結 中。
// content.js
iframeEl.src = chrome.runtime.getURL('main.html');
如此一來，透過這樣的定義，我們在iframe的內容中就可以順利使用Es6 Module了，同時因為main.html主要運行範圍歸屬於 extension 端，所以原本不能使用chrome.runtime相關方法及 Chrome.storage 的限制也順理成章的可以使用了。
溫腥提醒:在 Message API 傳送訊息的方式會因為檔案運行範圍會有所不同。
大家可以再依照個人需求調整
以上就是關於 如何 在 Content Script 中 使用 Iframe 的介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!
這首歌是一年前，每天早上走去 五倍上課的路上 每天都會聽的歌
走著想著 要怎麼樣 成為一個厲害的普通人
現在聽起來 都還是雞皮疙瘩..今日推薦 -> 成為一個厲害的普通人
iThome鐵人賽
看影片追技術